import { Button, Form, Switch, useFormApi } from '@douyinfe/semi-ui';
import { useEffect, useMemo, useRef, useState } from 'react';
import { debounce } from 'lodash';
import { useNavigate } from 'react-router-dom';
import { useStoreContext } from '../contact-context';
import * as yup from 'yup';

const schema = yup.object({

});


const ContactEdit = ({
  entity,
  persistEntity,
  formApiRef,
}: {
  entity?: any;
  persistEntity?: (entity: any) => void;
  formApiRef?: any;
}) => {

  const {
    state: { contact },
    useDispatch,
  } = useStoreContext();
  const navigate = useNavigate();
    const { key, loading, entities } = contact;

  const validate = async (values: any) => {
    try {
      await schema.validate(values, { strict: true, abortEarly: false });
    } catch (err: any) {
      return err.inner.reduce(
        (pre: any, cur: any) => ({ ...pre, [cur.path]: cur.message }),
        {}
      );
    }
  };


  return (
    <Form
      getFormApi={(api) => {
        if (formApiRef) {
          formApiRef.current = api;
        }
      }}
      // layout='horizontal'
      // onChange={(e) => {}}
      validateFields={validate}
      onSubmit={(values: any) => {
        persistEntity && persistEntity(values);
      }}
      initValues={entity}
      onReset={() => {}}
      >
      <div className="w-full flex justify-end items-center py-4 ">
        <Button onClick={() => navigate(-1)}>取消</Button>
        <Button theme="solid" htmlType="submit" className="mx-2"  disabled={loading}>
          保存
        </Button>
      </div>
    </Form>
  );
};

export default ContactEdit;
